<template>
  <div class="VR-preview-container">
    <div class="view-container-box">
      <div data-no-touch-simulate class="view_container" ref="viewContainer" />
    </div>
    <!-- 场景选择 -->
    <div class="choose-scene nav_view" v-if="sceneData.allShow">
      <el-tree-select
        v-model="queryData.typeId"
        placeholder="选择所属上级场景"
        :filter-node-method="filterNodeMethod"
        filterable
        :data="sceneData.sceneTree"
        default-expand-all
        :props="menuTreeSelectProps"
        :check-strictly="true"
        @change="handleCurFormSceneTypeChange"
        popper-class="gray-popper"
      ></el-tree-select>
    </div>
    <div class="mask" v-if="sceneData.allShow"></div>
    <img class="logo" :src="curSceneData.logo" alt="">
    <!-- 操作按钮 (全屏 音乐 分享等)-->
    <NavRight ref="navRightRef" :curSceneData="curSceneData"/>
    <!-- 场景轮播图 -->
    <div class="scene_view" v-if="navRightRef?.navRightData?.iconList[0].isActive">
      <div class="scene-view-container scene-pc-container">
        <scene-swiper 
          ref="sceneSwiperRef"
          :sceneData="sceneData"
          :model="'pc'"
          @onClickChangeScene="onClickChangeScene"
          :curSceneId="sceneData.curSceneId" 
          />
      </div>
      <!-- 移动端场景轮播 -->
      <div class="scene-view-container scene-mobile-container">
        <scene-swiper 
          :sceneData="sceneData"
          :model="'mobile'"
          @onClickChangeScene="onClickChangeScene"
          :curSceneId="sceneData.curSceneId" 
          />
      </div>
    </div>
    <!-- 信息点位预览 -->
    <el-dialog
      v-model="showInfoMarker"
      title="内容"
      width="1000px"
    >
      <div class="info-box">
        <div class="content-box">
          <div class="content" v-html="curInfoMarkerData.content"></div>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showInfoMarker = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
    <div class="tech">技术支持：锐狐-RUIFOX</div>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, computed, watch } from 'vue'
import { Viewer, utils } from 'photo-sphere-viewer'
import 'photo-sphere-viewer/dist/photo-sphere-viewer.css'
import { MarkersPlugin } from 'photo-sphere-viewer/dist/plugins/markers'
import * as PhotoSphereViewer from "photo-sphere-viewer/dist/adapters/cubemap.js";
import 'photo-sphere-viewer/dist/plugins/markers.css'
// import { Search} from '@element-plus/icons-vue'
import sceneSwiper from './components/sceneSwiper'
import NavRight from './components/NavRight'
import { useRouter } from "vue-router"
import { useStore } from 'vuex'
import { getSceneList } from '@/api/VR'

const router = useRouter()
const store = useStore()

const menuTreeSelectProps = {
  children: 'children',
  label: 'title',
  value: 'id',
}
// 场景分类对条件进行筛选
const filterNodeMethod = (value, data) => data.title.includes(value)
let viewContainer = ref(null)
const containerData = reactive({
  viewer: null,
  markersPlugin: null
})

const sceneData = reactive({
  sceneTree: store.getters.VRTree,
  sceneList: store.getters.VRList, //所有列表 
  curSceneId: '', // 当前渲染场景id
  bgsoundUrl:'', //背景音乐
  keywords: '',
  curSceneSmallList: [{}],// pc场景列表切换 6张图为一组，组成二维数组，轮播用
  swiperList:[{}], // 移动端场景列表切换 3张图为一组，组成二维数组，轮播用
})
if(sceneData.sceneTree?.length > 0){
  let firstScene = sceneData.sceneList.find(item => item.isFirst == true)
  //初始化第一张场景
  if(router.currentRoute.value.query?.sceneId){
    sceneData.curSceneId = router.currentRoute.value.query.sceneId
  }else if(firstScene){ 
    sceneData.curSceneId = firstScene.id
  }else{
    sceneData.curSceneId = sceneData.sceneList[0].id
  }
}

const curSceneData = computed(()=>{
  return sceneData.sceneList.find(item => item.id == sceneData.curSceneId) || {logo: ''}
})
const animatedValues = {
  latitude : { start: -Math.PI / 2, end: 0 },
  longitude: { start: Math.PI, end: 0 },
  zoom     : { start: 20, end: 30 },
  fisheye  : { start: 2, end: 0 },
};
// 场景图初始化
const initView = () => {
  containerData.viewer = new Viewer({
    container: viewContainer.value,
    //判断curSceneData.value.VRImg是全景图（即类型为string）还是6张立方贴图
    adapter: typeof curSceneData.value.VRImg == 'string' ? null : PhotoSphereViewer.CubemapAdapter,
    panorama: curSceneData.value.VRImg,
    // 入场从天而降动画
    defaultLat: animatedValues.latitude.start,
    defaultLong: animatedValues.longitude.start,
    defaultZoomLvl: animatedValues.zoom.start,
    fisheye: animatedValues.fisheye.start,
    size: {
      height: '100%',
      width: '100%'
    },
    plugins: [
      [
        MarkersPlugin,
        {
          markers: []
        }
      ]
    ],
    navbar: null
  })
  
  // 获取标注插件实例
  containerData.markersPlugin = containerData.viewer.getPlugin(MarkersPlugin)
}
// 加载完成之后触发
const viewerReady = () => {
  containerData.viewer.once('ready', () => {
    // 添加信息点
    const markerList = curSceneData.value?.markerList || []
    markerList.forEach(item => containerData.markersPlugin.addMarker(item))
    sceneData.allShow = true
    // 点击锚点触发
    containerData.markersPlugin.on('select-marker', (e, marker) => {
      if(marker.data.btnType == 1){ //导航锚点
        containerData.viewer.animate({
          longitude: marker.config.longitude,
          latitude: marker.config.latitude,
          zoom: 50,
          speed: '-2rpm'
        }).then(() => {
          handleNavigationMarkerClick(marker)
        })
      }else if(marker.data.btnType == 2){ //信息锚点
        handleInfoMarkerClick(marker)
      }
    })
  })
  containerData.viewer.once('ready', intro);
}
function intro() {
  containerData.viewer.stopAutorotate();
  new utils.Animation({
    properties: animatedValues,
    duration: 2500,
    easing: 'inOutQuad',
    onTick: (properties) => {
      containerData.viewer.setOption('fisheye', properties.fisheye);
      containerData.viewer.rotate({ longitude: properties.longitude, latitude: properties.latitude });
      containerData.viewer.zoom(properties.zoom);
    }
  })
    .then(() => {
      containerData.viewer.setOptions({
        autorotateLat: animatedValues.latitude.end,
        autorotateDelay: 1,
        autorotateSpeed: 0.05, // 自转速度
        // autorotateIdle: true,
      });
      containerData.viewer.startAutorotate();
    });
}
// 获取场景数据 实例化场景
const getSceneListData = async () => {
  initView()
  viewerReady()
}
// 点击导航锚点
const handleNavigationMarkerClick = (marker) => {
  sceneData.curSceneId = marker.config.data.next
}
// 点击信息锚点
const showInfoMarker = ref(false)
const curInfoMarkerData = ref({})
const handleInfoMarkerClick = (marker) => {
  curInfoMarkerData.value = marker.config.data
  showInfoMarker.value = true
}

// 表单当前选择的场景
// const curFormSceneType = ref('0')
const curFormSceneList = ref([])
const sceneSwiperRef = ref()
// 选择场景类型 获取场景页面
const handleCurFormSceneTypeChange = (val) => {
  if(sceneSwiperRef.value){
    sceneSwiperRef.value.handleCurFormSceneTypeChange(val)
  }
}

const defaultQueryData = {
  isAll: true, 
  status: 1, //场景状态 0未启用 1已启用
  typeId: '0', //场景分类id，查询当前分类及下面的所有场景图,不传或传0则查全部
}
// 分页参数
const queryData = reactive(Object.assign({},defaultQueryData))
const getCurFormSceneByPid = async () => {
  let res = await getSceneList(queryData)
  curFormSceneList.value = res.data.list
}
getCurFormSceneByPid()


// 点击场景列表的图
const onClickChangeScene = (val) => {
  sceneData.curSceneId = val
}
// 监听场景图id变化, 重新渲染
watch(() => sceneData.curSceneId,() => {
  changeScene()
},{deep:true})
const changeScene = () => {
  let curScene = sceneData.sceneList.find(item => item.id == sceneData.curSceneId)
  let VRImg = curScene.VRImg
  let markers = curScene.markerList
  containerData.markersPlugin.clearMarkers()
  
  containerData.viewer.setPanorama(
    VRImg,
    { longitude: 0, latitude: 0 },
    true
  ).then(() => {
    // 添加信息点
    if(markers?.length) markers.forEach(item => containerData.markersPlugin.addMarker(item))
    containerData.viewer.startAutorotate()
  })
  // 缩放恢复
  containerData.viewer.zoom(20)
}

const navRightRef = ref()
onMounted(() => {
  console.log('2331',navRightRef.value?.navRightData?.iconList[0].isActive);
  setTimeout(() => {
    getSceneListData()
  }, 100);
})

</script>
<style scoped lang='scss'>
.VR-preview-container{
  width: 100%;
  height: 100%;
}
.view-container-box{
  width: 100%;
  height: 100vh;
  ::v-deep(.view_container) {
    overflow: hidden;
  }
}
::v-deep(.info-box){
  .title{
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: 600;
  }
  .content-box{
    padding: 5px;
    background: #eee;
    .content{
      img{
        max-width: 100%;
      }
    }
  }
} 
</style>
<style scoped>
.mask {
  width: 100%;
  height: 110px;
  position: fixed;
  top: 0;
  background-image: linear-gradient(to top,transparent ,#000)
}
.popup,
.scene-mobile-container,
.view_container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.scene-mobile-container{
  display: none;
}

.error {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.view_container >>> .mark_content_container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.view_container >>> .mark_content_container:hover {
  cursor: pointer;
}

.view_container >>> .mark_text {
  background-color: rgba(0, 0, 0, .4);
  color: #fff;
  font-size: 17.5px;
  padding: 4px 8px;
  border-radius: 4px;
}

.view_container >>> .mark_img {
  width: 60px;
  height: 60px;
}

.nav-bottom {
  position: fixed;
  /* position: absolute; */
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
}
.btn {
  margin: auto;
  width: 80px;
  height: 12px;
  text-align: center;
  line-height: 12px;
  background-color: #1F73F2;
  color: #fff;
  border-radius: 20px 20px 0 0;
  cursor: pointer;
}
.btn i {
  font-size: 12px;
}
.nav_bottom {
  background-color: rgba(0, 0, 0, .8);
  color: #fff;
  display: flex;
  justify-content: space-around;
  border-radius: 4px;
  width: 576px;
  height: 72px;
  box-sizing: border-box;
}

.nav_bottom .nav_bottom_item {
  display: flex;
  flex-direction: column;
  align-content: center;
  padding-top: 10px;
  box-sizing: border-box;
}

.nav_bottom .nav_bottom_item:hover {
  cursor: pointer;
  border-bottom: 2px solid #FCA203;
}

.nav_bottom .nav_bottom_item span {
  font-size: 15px;
}

.nav_bottom .nav_bottom_item_active {
  border-bottom: 2px solid #FCA203;
  /* border-image: linear-gradient(270deg, #fa6400, #ffd706) 1 */
}

.nav_bottom .nav_bottom_item:last-child {
  margin-right: 0;
}

.nav_bottom .nav_bottom_item .nav_icon {
  text-align: center;
  margin-bottom: 10px;
  font-size: 20px;
}
.nav_view .title {
  font-size: 24px;
  color: #fff;
  line-height: 24px;
  margin: 40px 0 36px;
  text-align: center;
  cursor: default;
}
.nav_view .scene-choose {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  /* padding: 0 390px; */
  margin-bottom: 24px;
}
.scene-choose-mobile {
  display: none;
}
.nav_view >>> .el-scrollbar__bar.is-vertical {
  width: 8px;
  right: 20px;
  background-color: rgba(170, 170, 170, 0.5)
}
.nav_view >>> .el-scrollbar__bar.is-horizontal {
  display: none;
}
.nav_view >>> .el-scrollbar__bar.is-vertical>div {
  background-color: #D7D7D7;
  opacity: 1;
}
.nav_view >>> .el-input {
  width: 260px;
  height: 40px;
  border-radius: 50px;
}
.nav_view >>> .el-select .el-input {
  width: 160px;
}
.nav_view  >>> .el-select .el-input.is-focus .el-input__wrapper {
  box-shadow: none !important;
}
.nav_view  >>> .el-select .el-input:hover {
  border: none;
}
.nav_view  >>> .el-select .el-input__inner:focus {
  border: none;
}
.nav_view  >>> .el-select .el-input:active {
  border: none;
}

.nav_view >>> .el-input__wrapper {
  box-shadow: none !important;
  /* background-color: #555555; */
  background-color: rgba(0, 0, 0, .4);
}
.nav_view >>> .el-select .el-input__wrapper {
  border-radius: 50px;
}
.nav_view  >>> .search .el-input__wrapper {
  border-radius: 50px 0 0 50px;
  border-right: none;
}
.nav_view .scene-search-box button{
  /* background-color: #555555; */
  background-color: rgba(0, 0, 0, .4);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 0 50px 50px 0;
  cursor: pointer;
}
.nav_view .scene-search-box >>> .el-input-group__append {
  border-radius: 0 50px 50px 0;
  box-shadow: none;
  border-left: none;
  background-color: #555;
  box-sizing: border-box;
  color: #333333;
  font-size: 16px;
  padding: 0 0 0 0; 
}
.nav_view .scene-search-box >>> .el-input-group__append .el-button {
  outline: none
}

.nav_view >>> .el-input.is-disabled .el-input__wrapper {
  background-color: #555555;
}
.nav_view >>> .el-input__wrapper .el-input__inner {
  color: #fff;
}
.nav_view >>> .el-select__popper.el-popper {
  background-color: #333;
  border: none;
} 
.nav_view >>> .el-select-dropdown {
  padding: 10px 0;
}
.nav_view >>> .el-select-dropdown__item {
  color: #fff;
}
.nav_view >>> .el-select-dropdown__item:hover {
  color: #FCA203;
  background-color: transparent;
}
.nav_view >>> .el-select-dropdown__item.hover {
  background-color: transparent;
}
.nav_view >>> .el-select-dropdown__item.selected {
  color: #FCA203;
  font-weight: normal;
}
.nav_view >>> .el-popper__arrow {
  display: none;
}
.nav_view .scene-choose >>> .el-scrollbar__bar.is-vertical {
  right: 8px;
}
.nav_view .select-item {
  margin: 0 20px;
}
.nav_view .scene-content {
  padding: 0 80px;
  display: flex;
  flex-wrap: wrap;
  margin-right: -23px;
}
.nav_view >>> .el-scrollbar__bar.is-horizontal {
  display: none;
}
.nav_view  >>> .el-dialog__body {
  padding: 0 !important;
}
/* 场景轮播图 */
.scene_view {
    position: absolute;
    bottom: 10vh;
    z-index: 99;
    width: 100%;
    background-color: rgba(51, 51, 51, 0.7);
    text-align: center;
    min-width: 375px;
}
@media screen and (max-width: 1024px) {
  .scene_view{
    bottom: 8vh;
  }
}
.scene_view .scene-title {
  margin-top: 5px;
  margin-bottom: 0px;
  display: inline-block;
  color: #fff;
  font-size: 12px;
}
.scene_view >>> .el-carousel__container {
  height: 110px;
  width: 100%;
}
.scene_view >>> .el-carousel__arrow{
  width: 19px;
  height: 38px;
  border-radius: 4px;
  background-color: rgba(0,0,0,0.6);
}
.scene_view >>> .el-carousel__arrow.el-carousel__arrow--left {
  left: 8.3vw;
}
.scene_view >>> .el-carousel__arrow.el-carousel__arrow--right {
  right: 8.3vw;
}

.logo {
  position: fixed;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  width: 500px;
  z-index: 98;
}
/* 场景选择 */
.choose-scene {
  position: fixed;
  /* position: absolute; */
  top: 50px;
  left: 20px;
  z-index: 99;
  color: #fff;
  height: initial !important;
}
.choose-scene .select {
  width: 241px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 50px;
  line-height: 40px;
  font-size: 14px;
  box-sizing: border-box;
  padding-left: 27px;
  cursor: pointer;
  display: flex;
}
.choose-scene .select .line {
  margin: 0 20px;
}
.choose-scene .select span.tit {
  max-width: 65px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-wrap: break-word;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  display: -webkit-box !important;
}
.arrow-top {
  transition: all 0.4s ease;
  position: absolute;
  right: 20px;
  /* margin: 0 20px; */
}
.arrow-btn {
  transition: all 0.4s ease;
}
.choose-scene .select-dropdown {
  width: 241px;
  height: 225px;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  margin-top: 10px;
  padding: 20px 0 20px;
  box-sizing: border-box;
}
.choose-scene .select-dropdown ul{
  width: 80px;
  text-align: center;
}

.choose-scene .select-dropdown li {
  font-size: 14px;
  font-family: Arial;
  line-height: 14px;
  margin-bottom: 20px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-wrap: break-word;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  display: -webkit-box !important;
}
.choose-scene .select-dropdown li:hover {
  color: #FCA203;
}
.choose-scene .select-dropdown .dropdown-left {
  width: 97px;
  /* padding: 0 20px; */
  box-sizing: border-box;
  text-align: center;
  border-right: 1px solid #aaa;
}
.choose-scene .select-dropdown .dropdown-right {
  width: 144px;
  box-sizing: border-box;
  padding-left: 20px;
}
.dropdown-right >>> .el-scrollbar__bar.is-vertical {
  width: 8px;
  right: 8px;
  background-color: rgba(170, 170, 170, 0.5)
}
.dropdown-right >>> .el-scrollbar__bar.is-horizontal {
  display: none;
}
.dropdown-right >>> .el-scrollbar__bar.is-vertical>div {
  background-color: #d7d7d7;
  opacity: 1;
}
.fade-enter-active,
.fade-leave-active {
  transition: max-height 0.5s linear;
}

.fade-enter,
.fade-leave-to {
  max-height: 0;
  opacity: 0;
}
.fade-enter-to,
.fade-leave {
  max-height: 225px;
}
.active-class {
  color: #FCA203;
}

.contact .dialog_content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #333;
}

.contact .dialog_content .title {
  font-size: 22.5px;
  font-weight: 700;
}

.contact .dialog_content .contact_type {
  font-size: 20px;
  line-height: 32.5px;
}

.contact .dialog_content .QR_code {
  display: flex;
  font-size: 20px;
  line-height: 32.5px;
}

.contact .dialog_content .QR_code .QR_code_cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
}

.contact .dialog_content .QR_code .QR_code_image {
  width: 125px;
  height: 125px;
}

/* 专家介绍弹框 */
.docDialog .content .mobile-tit,
.docDialog .content .fanhui {
  display: none;
}
.docDialog >>> .el-dialog {
  width: 960px;
  min-width: 375px;
}
.docDialog >>> .el-dialog__header {
    display: none;
}
.docDialog >>> .el-dialog__body {
  padding: 40px 0 0 !important;
  height: 100%;
  box-sizing: border-box;
}
.docDialog .content {
  padding-bottom: 80px;
  height: 100%;
  box-sizing: border-box;
}
.docDialog .content .nav-search {
  padding: 0 80px ;
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.docDialog .content .nav-search >>> .el-select {
  /* margin-right: 20px; */
  margin-bottom: 10px;
}
.docDialog .content .nav-search >>> .el-input {
  width: 260px;
  height: 40px;
  border-radius: 50px;
}
.docDialog .content .nav-search >>> .el-select .el-input {
  width: 160px;
}
.docDialog .content .nav-search >>> .el-input__wrapper {
  border-radius: 50px;
  box-shadow: none;
  background-color: #F2F2F2;
}
.docDialog .content .nav-search .search-box >>> .el-input__wrapper {
    padding: 1px 0 1px 11px;
  }
.docDialog .content .nav-search >>> .el-input__wrapper .el-input__inner {
  color: #333333;
}
.docDialog .content .nav-search >>> .search .el-input__wrapper {
  border: 1px solid rgba(170, 170, 170, 0.5);
  border-radius: 50px 0 0 50px;
  border-right: none;
  background-color: #fff;
}
.docDialog .content .nav-search >>> .el-input__wrapper:hover {
  box-shadow: none;
}
.docDialog .content .nav-search >>> .el-input-group__append {
  border-radius: 0 50px 50px 0;
  box-shadow: none;
  border: 1px solid rgba(170, 170, 170, 0.5);
  border-left: none;
  background-color: transparent;
  box-sizing: border-box;
  color: #333333;
  font-size: 16px;
  padding: 0 0 0 0; 
}
.docDialog .content .nav-search >>> .el-input-group__append .el-button {
  outline: none
}
.docDialog .content .nav-search >>> .el-select-dropdown  .el-scrollbar__bar.is-vertical {
  right: 8px;
}
.docDialog .content .nav-search button{
  background: none;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 0 50px 50px 0;
  cursor: pointer;
}
.docDialog .content .doc-content {
  padding: 1px 80px 0;
  display: flex;
  flex-wrap: wrap;
  margin-right: -10px;
}
.docDialog .doc-content .dep-class {
  width :260px;
  height: 182px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  margin-right: 10px;
  margin-bottom: 10px;
  box-sizing: border-box;
  padding: 20px 10px 32px;
}
.docDialog .doc-content .dep-class .dep-tit {
  display: flex;
  justify-content: space-between;
  position: relative;
}
.doc-content .dep-class .dep-tit .dep-name {
  cursor: pointer;
  width:180px;
  height: 32px;
  font-size: 16px;
  line-height: 1;
  color: #4D668A;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-wrap: break-word;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box !important;
}
.doc-content .dep-class .dep-tit .more {
  font-size: 12px;
  color: #1F73F2;
  cursor: pointer;
}
.doc-content .dep-class .dep-tit:after {
  content: "";
  display:block;
  width: 240px;
  height: 1px;
  background-color: rgba(170, 170, 170, 0.2);
  position: absolute;
  bottom: -5px;
}
.doc-content .dep-class .doc-name {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  height: 72px;
  overflow: hidden;
}
.doc-content .dep-class .doc-name .doc-item {
  width:80px;
  height: 14px;
  font-size: 14px;
  color: #333333;
  margin-bottom: 15px;
  line-height: 1;
  cursor: pointer;
}
.doctor {
  width :260px;
  height: 227px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  margin-right: 10px;
  margin-bottom: 10px;
  box-sizing: border-box;
  padding: 20px;
}
.doctor .doc-info {
  display: flex;
  position: relative;
}
.doctor .doc-info img {
  width:80px;
  height: 112px;
  cursor: pointer;
}
.doctor .doc-info .doc-right {
  margin-left: 20px;
  cursor: default;
}
.doctor .doc-info .doc-right .name {
  font-size: 14px;
  font-family: Arial;
  line-height: 14px;
  margin-bottom: 10px;
}
.doctor .doc-info .doc-right span {
  font-size: 12px;
  line-height: 1;
  color: #AAAAAA;
}
.doctor .doc-info .doc-right .department {
  color: #036F6F
}
.doctor .doc-info .doc-right .protit {
  color: #333333;
  margin-bottom: 12px;
}
.doctor .doc-info:after {
  content: "";
  display: block;
  width: 220px;
  height: 1px;
  background-color: #E4E4E4;
  position: absolute;
  bottom: -10px;
}
.doctor .goodat {
  margin-top: 20px;
  color: #7F7F7F;
  font-size: 12px;
  line-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-wrap: break-word;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  display: -webkit-box !important;
  cursor: default;
}
/* 医生详情 */
.docInfo-content {
  padding: 24px 80px 70px;
}
.docInfo-content .doc-intro{
  display: flex;
  flex-wrap: wrap;
  height: 262px;
  border-bottom: 1px solid #e4e4e4;
  box-sizing: border-box;
  margin-bottom: 20px;
  position: relative;
}
.docInfo-content img {
  width: 144px;
  height: 200px;
  margin-right: 40px;
}
.docInfo-content .info-right p {
  margin-bottom: 20px;
  font-size: 14px;
  color: #333;
}
.docInfo-content .info-right p span {
  color: #AAAAAA;
}
.docInfo-content .info-right p.doc-name{
  font-size: 20px;
  line-height: 20px;
  font-family: Arial;
  color: #000;
}
.docInfo-content .info-right p.goodat {
  width: 616px;
  line-height: 21px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-wrap: break-word;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  display: -webkit-box !important;
}
.docIntro-detail .intro-tit{
  font-size: 16px;
  font-family: Arial;
  line-height: 16px;
  color: #000;
  margin-bottom: 20px;
}
.content >>> .el-scrollbar__bar.is-vertical {
  width: 8px;
  right: 20px;
  background-color: rgba(170, 170, 170, 0.5)
}
.content >>> .el-scrollbar__bar.is-horizontal {
  display: none;
}
.content >>> .el-scrollbar__bar.is-vertical>div {
  background-color: #1F73F2;
  opacity: 1;
}

.content .title {
  font-size: 24px;
  color: #000;
  margin-bottom: 36px;
  text-align: center;
  cursor: default;
}
 .content .nav {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}
 .content .nav .type {
  width: 140px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  color: #000000;
  background-color: #F2F2F2;
  border-radius: 5px;
  cursor: pointer;
}
 .content .nav .type + .type {
  margin-left: 20px;
}
 .content .nav .type.active {
  background-color: #1F73F2;
  color: #fff;
}
/* 面包屑 */
.content .top {
  display: flex;
  align-items: center;
  padding: 0 80px;
  margin-bottom: 24px;
  font-size: 14px;
}
.content .top >>> .el-breadcrumb {
  margin-top: 1px;
  cursor: default;
}
.content .top .back {
  position: relative;
  margin-right: 20px;
  color: #1F73F2;
  cursor: pointer;
}
.content .top .back:after {
  content: '';
  display: block;
  height: 16px;
  width: 1px;
  background-color: rgba(170, 170, 170, 0.5);
  position: absolute;
  top: 2px;
  right: -0.625rem;
}

.tech {
  position: fixed;
  bottom: 40px;
  right: 100px;
  color: #fff;
  font-size: 16px;
  line-height: 16px;
  font-family: Arial;
  z-index: 10000;
}

@media screen and (max-width: 1360px) and  (min-width: 1024px) {
  .nav-right,
  .btn-bottom,
  .sceneDialog >>> .el-dialog,
  .scene_view .scene-view-container,
  .choose-scene .select,
  .choose-scene .select-dropdown,
  /* .choose-scene, */
  .docDialog >>> .el-dialog,
  {
    transform: scale(0.8);
    transition:transform 0.3s linear;
  }
  .tech {
    font-size: 14px;
    line-height: 14px;
  }
  .choose-scene .select-dropdown {
    position: relative;
    top: -30px;
  }
}
@media screen and (max-width: 1024px) {
  .scene-mobile-container{
    display: block;
  }
  .choose-scene {
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
  }
  .choose-scene .select {
    width: 192px;
    height: 32px;
    font-size: 12px;
    line-height: 32px;
    padding-left: 16px;
  }
  .choose-scene .select .line {
    margin: 0 8px;
  }
  .choose-scene .select i {
    font-size: 10px;
  }
  .arrow-top {
    right: 16px;
    margin: 0 10px;
  }
  .choose-scene .select-dropdown {
    width: 192px;
  }
  .choose-scene .select-dropdown ul{
    width: 70px;
  }
  .choose-scene .select-dropdown li {
    font-size: 12px;
    line-height: 12px;
  }
  .nav-bottom {
    bottom: 52px;
  }
  .btn {
    width: 64px;
    height: 10px;
    line-height: 10px;
  }
  .nav_bottom {
    border-radius: 4px;
    width: 360px;
    height: 60px;
  }
  .nav_bottom .nav_bottom_item span {
    font-size: 12px;
  }
  .nav_bottom .nav_bottom_item .nav_icon {
    margin-bottom: 8px;
    font-size: 15px;
  }
  .tech {
    bottom: 20px;
    right: 50%;
    transform: translateX(50%)
  }
  /* 专家介绍 */
  .close {
    font-size: 16px;
  }
  /* 场景选择 */
  .sceneDialog >>> .el-overlay {
    z-index: 2500 !important;
  }
  .sceneDialog >>> .el-dialog {
    width: 100%;
    min-width: 375px;
  }
  .sceneDialog >>> .el-dialog__body {
    padding: 0 !important;
    height: 100%;
    box-sizing: border-box;
  }
  .nav_view {
    height: calc(100% - 40px);
  }
  .nav_view >>> .el-scrollbar {
    height: calc(100% - 196px);
  }
  .nav_view >>> .el-scrollbar__wrap {
    height: 100% !important;
  }
  .nav_view .scene-choose {
    display: none;
  }
  .scene-choose-mobile {
    display: block;
  }
  .scene-choose-mobile .scene-select{
    display: flex;
    width: 241px;
    margin: auto;
    margin-bottom: 10px;
    justify-content: space-between;
  }
  .scene-choose-item {
    width: 112px;
    height: 32px;
    background-color: #555;
    border-radius: 50px;
    line-height: 32px;
    position: relative;
    padding-left: 10px;
    box-sizing: border-box;
    cursor: pointer;
  }
  .scene-choose-item span {
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-wrap: break-word;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box !important;
    width: 72px;
  }
  .scene-choose-item i {
    color: #AAA;
    font-size: 10px;
    position: absolute;
    right: 8px;
    top: 0;
  }
  .nav_view .scene-content {
    padding: 0 15px;
    margin-right: -10px;
  }
  .scene_view >>> .el-carousel__arrow.el-carousel__arrow--left {
    left: 7px;
  }
  .scene_view >>> .el-carousel__arrow.el-carousel__arrow--right {
    right: 7px;
  }
  .nav_view >>> .el-scrollbar__bar.is-vertical {
      right: 10px;
  }
  .popup, .scene-mobile-container{
    display: block;
  }
  .popup >>> .van-picker__toolbar {
    background-color: #F2F2F2;
  }

  .scene-pc-container {
    display: none;
  }
 

  .logo {
    top: 62px;
    width: 375px;
  }
  .choose-scene .select span.tit {
    max-width: 60px;
  }
  .scene-select >>> .el-input {
    border-radius: 50px;
    width: 112px;
    height: 32px;
  }
  .scene-select >>> .el-input__inner {
    cursor: pointer;
  }
  .scene-select >>> .el-input__wrapper {
    border-radius: 50px;
    cursor: pointer;
  }
  .scene-select >>>.el-input.is-disabled .el-input__wrapper {
    cursor: not-allowed;
  }
  .scene-search-box {
    padding: 0 15px;
  }
  .scene-search-box >>> .el-input {
    width: 100%;
    height: 32px;
    margin-bottom: 10px;
  }
  .nav_view .scene-search-box button{
    height: 32px;
  }
}
</style>